<%--
  Created by IntelliJ IDEA.
  User: 郑自航
  Date: 2018/7/26
  Time: 18:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="basePath" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" href="${basePath}/layui/css/layui.css">
    <link rel="stylesheet" href="${basePath}/css/manager.css">
    <link rel="stylesheet" href="${basePath}/css/main.css">
    <script type="text/javascript" src="${basePath}/js/plugin/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="${basePath}/js/plugin/jquery.i18n.properties.min.js"></script>
    <script src="${basePath}/layer/layer.js"></script>
    <script src="${basePath}/layui/layui.js"></script>
    <!-- 引入 ECharts 文件 -->
    <script src="${basePath}/layui/echarts/echarts.common.min.js"></script>
</head>

<body class="page-body" style="margin-left:  10px;
    margin-right: 10px;">
<div style="width: 98%;">
    <div class="order-container-box">
        <!-- Unnamed (Rectangle) -->
        <div class="ax_default_box">
            <div class="text-box-man">
                <div class="ico-box-man">
                    <img class="img" style="width: 50px;height: 47px;" src="./images/u370.png">
                </div>
                <div class="order-data-box">
                    <div class="text-title-man"><span
                            style="font-family:'PingFangSC-Regular', 'PingFang SC';color:#999999;" class="sp-title">今日订单总数</span>
                    </div>
                    <div class="text-value-man"><span style="font-family:'Helvetica';color:#666666;" class="sp-value"
                                                      id="todayOrderCount">¥0</span></div>
                </div>
            </div>
        </div>
        <!-- Unnamed (Rectangle) -->
        <div class="ax_default_box">
            <div class="text-box-man">
                <div class="ico-box-man">
                    <img class="img" style="width: 50px;height: 47px;" src="./images/u388.png">
                </div>
                <div class="order-data-box">
                    <div class="text-title-man"><span
                            style="font-family:'PingFangSC-Regular', 'PingFang SC';color:#999999;" class="sp-title">今日订单总额</span>
                    </div>
                    <div class="text-value-man"><span style="font-family:'Helvetica';color:#666666;" class="sp-value"
                                                      id="todayTotalMoney">¥0</span></div>
                </div>
            </div>
        </div>
        <!-- Unnamed (Rectangle) -->
        <div class="ax_default_box">
            <div class="text-box-man">
                <div class="ico-box-man">
                    <img id="u370_img" class="img" style="width: 50px;height: 47px;" src="./images/u388.png">
                </div>
                <div class="order-data-box">
                    <div class="text-title-man"><span
                            style="font-family:'PingFangSC-Regular', 'PingFang SC';color:#999999;" class="sp-title">昨日订单总额</span>
                    </div>
                    <div class="text-value-man"><span style="font-family:'Helvetica';color:#666666;" class="sp-value"
                                                      id="yesterdaytOtalMoney">¥0</span></div>
                </div>
            </div>
        </div>
        <!--Unnamed (Rectangle)-->
        <div class="ax_default_box">
            <div class="text-box-man">
                <div class="ico-box-man">
                    <img class="img" style="width: 50px;height: 47px;" src="./images/u367.png">
                </div>
                <div class="order-data-box">
                    <div class="text-title-man"><span
                            style="font-family:'PingFangSC-Regular', 'PingFang SC';color:#999999;" class="sp-title">近7天订单总额</span>
                    </div>
                    <div class="text-value-man"><span style="font-family:'Helvetica';color:#666666;" class="sp-value"
                                                      id="near7dayTotalMoney">¥0</span></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="layui-row  text-first-box">
    <div class="text ">
        <p class="p-text-box-1"><span class="tex-box_1">待处理事务</span></p>
    </div>
    <div class="d-box-1-content">
        <div class="text-u393_text">
            <p class="cache-box-1"><span style="color: rgb(26, 188, 156);">待付款订单</span>
                <span style="color: rgb(26, 188, 156);">(</span>
                <span style="color: rgb(26, 188, 156);" id="waitPayOrder">0</span>
                <span style="color: rgb(26, 188, 156);">)</span>
            </p>
            <p class="cache-box-1"><span style="color: rgb(26, 188, 156);">已完成订单</span>
                <span style="color: rgb(26, 188, 156);">(</span>
                <span style="color: rgb(26, 188, 156);" id="finshOrder">0</span>
                <span style="color: rgb(26, 188, 156);">)</span>
            </p>
            <p class="cache-box-1"><span style="color: rgb(26, 188, 156);">待服务订单</span>
                <span style="color: rgb(26, 188, 156);">(</span>
                <span style="color: rgb(26, 188, 156);" id="waitServiceOrder">0</span>
                <span style="color: rgb(26, 188, 156);">)</span>
            </p>
        </div>
    </div>
</div>
<div class="layui-row  text-first-box">
    <div class="text ">
        <p class="p-text-box-1"><span class="tex-box_1">用户总览</span></p>
    </div>
    <div class="d-box-1-content">
        <div class="text-u393_text">
            <div class="d-box-text-3 ">
                <p style="font-size:28px;margin-top: 20px;"><span style="color:#F04844;" id="todyUserCount">0</span></p>
                <p style="font-size:14px;" class="lab-box-tex-3"><span style="color:#666666;">今日新增</span></p>
            </div>
            <div class="d-box-text-3 ">
                <p style="font-size:28px;"><span style="color:#F04844;" id="YesterdayUserCount">0</span></p>
                <p style="font-size:14px;" class="lab-box-tex-3"><span style="color:#666666;">昨日新增</span></p>
            </div>
            <div class="d-box-text-3 ">
                <p style="font-size:28px;"><span style="color:#F04844;" id="monthUserCount">0</span></p>
                <p style="font-size:14px;" class="lab-box-tex-3"><span style="color:#666666;">本月新增</span></p>
            </div>
            <div class="d-box-text-3 ">
                <p style="font-size:28px;"><span style="color:#F04844;" id="totalUserCount">0</span></p>
                <p style="font-size:14px;" class="lab-box-tex-3"><span style="color:#666666;">会员总数</span></p>
            </div>
        </div>
    </div>
</div>
<div class="layui-row ">
    <div id="u392_text" class="text ">
        <p class="p-text-box-1"><span class="tex-box_1">订单统计</span></p>
    </div>
</div>
<div id="u392" class="ax_default_box_1">
    <div id="" class="order-text-count">
        <div class="bx-default-box-1">
            <div class="">
                <span class="text-title-order-total">本月订单总数</span>
            </div>
            <div class="text ">
                <span class="text-order-total" id="monthOrderCount">0</span>
            </div>
            <div class="text ">
                <img src="images/dw-ico.png"/>
                <span id="MonthAdds">0%</span>
                <span class="text-order-comp">同比上月</span>
            </div>
        </div>
        <div class="bx-default-box-1">
            <div class="">
                <span class="text-title-order-total">本周订单数量</span>
            </div>
            <div class="text ">
                <span class="text-order-total" id="near7dayOrderCount">0</span>
            </div>
            <div class="text ">
                <img src="images/up_ico.png"/>
                <span id="ToweekAdds">0%</span>
                <span class="text-order-comp">同比上周</span>
            </div>
        </div>
    </div>
</div>
<div style="float: right;margin-right: 60px;">
    <div class="layui-btn-group">
        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="getTodayCount()">
            <i class="layui-icon">今日</i>
        </button>
        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="onSelectNear7Days()">
            <i class="layui-icon">本周</i>
        </button>
        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="onSelectDayOfMonth()">
            <i class="layui-icon">本月</i>
        </button>
    </div>
    <div class="layui-inline">
        <span class="layui-inline" style="margin-left: 15px;">自定义</span>
        <div class="layui-input-inline">
            <input class="layui-input" id="queryDate" placeholder="yyyy-MM-dd" type="text">
        </div>
        <button class="layui-btn layui-btn-normal layui-btn-sm" onclick="getOrderCountData()">
            <i class="layui-icon">&#xe615;</i>
        </button>
    </div>
</div>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 80%;height:400px;display: inline-block;">
</div>
</div>
<script type="text/javascript" src="js/i18n.js"></script>
<script type="text/javascript" src="js/DateFormate.js"></script>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            subtext: '近一周订单统计'
        },
        tooltip: {
            trigger: 'axis',
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '5%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '总订单数',
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                stack: '总量',
                smooth: true,
                areaStyle: {
                    color: '#dbeefc'
                },// 普通样式。
                itemStyle: { // 点的颜色。
                    color: '#61b4f0'
                }
            },
            {
                name: '总金额',
                type: 'line',
                stack: '总量',
                smooth: true,
                data: [120, 132, 101, 134, 90, 230, 210]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    // myChart.setOption(option);

    $(function () {
        console.log("33333333333333333")
        //注意：导航 依赖 element 模块，否则无法进行功能性操作
        layui.use('element', function () {
            var element = layui.element;
            element.init();
            element.init('breadcrumb');
            element.render('nav');
            element.render('tab');
            //…
        });
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            var time = formatDateTime(new Date())
            //日期时间选择器
            laydate.render({
                elem: '#queryDate',
                range: true,
                max: time,
                lang: $._lang //控制语言
            });
        });
    });
    var near7DaysOrderCount;
    var dayOfMonthOrderCount;

    var xAxis_7 = [];
    var series_7 = [[], []];
    var xAxis_30 = [];
    var series_30 = [[], []];
    $(function () {
        $.getJSON("${basePath}/getManagerIndexData.do", function (result) {
            if (result && result.code == 0) {
                //{"code":0,"msg":"ok","count":null,"data":
                // {"userCount":{"todyUserCount":0,"totalUserCount":8,"monthUserCount":4,"YesterdayUserCount":3},
                // "mainIndexOrderCount":{"yesterdaytOtalMoney":92,"yesterdayOrderCount":8,"near7dayOrderCount":26,"near7dayTotalMoney":422,"todayOrderCount":7,"todayTotalMoney":82},
                // "orderTransaction":{"waitService":5,"waitPay":7,"finsh":2}}}
                console.log(result.data);
                var orderTransaction = result.data.orderTransaction;
                $("#waitPayOrder").text(orderTransaction.waitPay);
                $("#finshOrder").text(orderTransaction.finsh);
                $("#waitServiceOrder").text(orderTransaction.waitService);

                var mainIndexOrderCount = result.data.mainIndexOrderCount;
                $("#todayOrderCount").text(mainIndexOrderCount.todayOrderCount);
                $("#todayTotalMoney").text("¥" + mainIndexOrderCount.todayTotalMoney ? mainIndexOrderCount.todayTotalMoney : 0);
                $("#near7dayTotalMoney").text("¥" + mainIndexOrderCount.near7dayTotalMoney);
                $("#near7dayOrderCount").text(mainIndexOrderCount.near7dayOrderCount);
                $("#yesterdaytOtalMoney").text("¥" + mainIndexOrderCount.yesterdaytOtalMoney);
                $("#yesterdayOrderCount").text(mainIndexOrderCount.yesterdayOrderCount);

                var userCount = result.data.userCount;
                $("#todyUserCount").text(userCount.todyUserCount);
                $("#totalUserCount").text(userCount.totalUserCount);
                $("#monthUserCount").text(userCount.monthUserCount);
                $("#YesterdayUserCount").text(userCount.YesterdayUserCount);

                var orderCount = result.data.orderCount;
                $("#monthOrderCount").text(orderCount.monthOrderCount);
                $("#near7dayOrderCount").text(orderCount.near7dayOrderCount);

                var preToweekOrderCount = orderCount.preToweekOrderCount;
                var preMonthOrderCount = orderCount.preMonthOrderCount;
                var MonthAdds =preMonthOrderCount>0? (orderCount.monthOrderCount - preMonthOrderCount) / preMonthOrderCount:orderCount.monthOrderCount;
                var ToweekAdds =preToweekOrderCount>0? (orderCount.near7dayOrderCount - preToweekOrderCount) / preToweekOrderCount:preToweekOrderCount;
                MonthAdds = Math.round(MonthAdds * 10000) / 100;
                ToweekAdds = Math.round(ToweekAdds * 10000) / 100;

                $("#MonthAdds").text(MonthAdds + "%")
                $("#ToweekAdds").text(ToweekAdds + "%")

                var MonthAdds_img = "images/dw_ico.png";
                var ToweekAdds_img = "images/dw_ico.png";
                if(MonthAdds>=0){
                    MonthAdds_img = "images/up_ico.png";
                }
                if(ToweekAdds>=0){
                    ToweekAdds_img = "images/up_ico.png";
                }
                $("#MonthAdds").prev().attr("src",MonthAdds_img);
                $("#ToweekAdds").prev().attr("src",ToweekAdds_img);

            } else {
                top.myLayer.confirm("获取首页数据失败!");
            }
        })
        $.getJSON("${basePath}/getChartsOrderCountData.do", function (result) {
            if (result && result.code == 0) {
                console.log("获取统计图数据成功")
                near7DaysOrderCount = result.data.near7DaysOrderCount;
                dayOfMonthOrderCount = result.data.dayOfMonthOrderCount;
                onLoadingDaysOrderCount(near7DaysOrderCount, 7);
                onLoadingDaysOrderCount(dayOfMonthOrderCount, 30);
                onSelectDayOfMonth();
            }
        })
    });

    function onSelectNear7Days() {
        option.xAxis.data = [];
        option.series[0].data = [];
        option.series[1].data = [];

        option.xAxis.data = xAxis_7;
        option.series[0].data = series_7[0];
        option.series[1].data = series_7[1];
        myChart.setOption(option);
    }

    function onSelectDayOfMonth() {
        option.xAxis.data = [];
        option.series[0].data = [];
        option.series[1].data = [];

        option.xAxis.data = xAxis_30;
        option.series[0].data = series_30[0];
        option.series[1].data = series_30[1];
        console.log("option------", option)
        // option.xAxis.data = null;
        myChart.setOption(option);
    }

    function onLoadingDaysOrderCount(OrderCount, days) {
        var xAxis = [];
        var series = [[], []];
        console.log('onLoadingDaysOrderCount=================================')
        if (OrderCount) {
            console.log("start------", OrderCount)
            var today = formatDate(new Date()).replace(/-/g, "");
            today = Number(today);
            var temday = today - days;
            var j = 0;
            for (var i = temday; i <= today; i++) {
                var day = j < OrderCount.length ? OrderCount[j].day : null;
                xAxis.push(i)
                if (day == i) {
                    series[0].push(OrderCount[j].todyOrderCount)
                    series[1].push(OrderCount[j].todyTotalMoney);
                    j++;
                } else {
                    series[0].push(0)
                    series[1].push(0);
                }
            }
            if (days == 7) {
                xAxis_7 = xAxis;
                series_7 = series;
            } else if (days == 30) {
                xAxis_30 = xAxis;
                series_30 = series;
            }

            console.log("data---todyOrderCount---", series[0])
            console.log("data---todyTotalMoney---", series[1])
            // 使用刚指定的配置项和数据显示图表。
            // myChart.setOption(option);
        }
    }
    function getOrderCountData() {
        var queryData = $("#queryDate").val();
        if(!queryData){
            return;
        }
        console.log(queryData);
        //sys_index.page:409 2018-08-01 - 2018-09-01
        var querys = queryData.split(" - ");

        var param = {
            begDate:querys[0],
            endDate:querys[1]
        }
        $.getJSON("${basePath}/getOrderCountData.do",param, function (result) {
            if (result && result.code == 0) {
                console.log(result.data);
                var OrderCount = result.data;
                option.xAxis.data = [];
                option.series[0].data = [];
                option.series[1].data = [];

                console.log('onLoadingDaysOrderCount=================================')
                if (OrderCount) {
                    console.log("start------", OrderCount)
                    var today = querys[1].replace(/-/g, "");
                    var temday = querys[0].replace(/-/g, "");
                    today = Number(today);
                    temday = Number(temday);
                    // var temday = today - days;
                    var j = 0;
                    for (var i = temday; i <= today; i++) {
                        var day = j < OrderCount.length ? OrderCount[j].day : null;
                        option.xAxis.data.push(i)
                        if (day == i) {
                            option.series[0].data.push(OrderCount[j].todyOrderCount)
                            option.series[1].data.push(OrderCount[j].todyTotalMoney);
                            j++;
                        } else {
                            option.series[0].data.push(0)
                            option.series[1].data.push(0);
                        }
                    }

                    console.log("data---todyOrderCount---", option.series[0].data)
                    console.log("data---todyTotalMoney---", option.series[1].data)

                    // option.xAxis.data = xAxis_30;
                    // option.series[0].data = series_30[0];
                    // option.series[1].data = series_30[1];
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
            }else {
                top.myLayer.confirm("获取数据失败!");
            }
        })
    }
    function getTodayCount() {
        var todayOrderCount = $("#todayOrderCount");
        var todayTotalMoney = $("#todayTotalMoney");
        var today = formatDateTime(new Date())
        option.xAxis.data = [today];
        option.series[0].data = [todayOrderCount];
        option.series[1].data = [todayTotalMoney];
        myChart.setOption(option);
    }

</script>
</body>
</html>
